
<template>
    <div>
      <button @click="changeMsg">change</button>
      <div>{{message}}</div>
      <div>{{shallowRefmessage}}</div>
      <div>{{messageMyRef}}</div>
    </div>
  
  </template>
  
  
  <script setup lang="ts">
  import { track } from '@vue/reactivity';
  import { isRef, ref,Ref ,shallowRef,customRef,triggerRef} from 'vue';
  // let message:string='tang'
  let message:Ref<string> = ref('tang')
  let notRef:number = 1
  
  let shallowRefmessage = shallowRef({
    name:'唐少'
  })
  
  const changeMsg=()=>{
    message.value ='changemessage',
    console.log(message),
    console.log(isRef(message)),
    console.log(isRef(notRef)),
    shallowRefmessage.value.name='nihao'
    messageMyRef.value = 'messageMyRef'
  }
   
  function MyRef<T>(value:T){
    return customRef((track,trigger)=>{
      return {
        get(){
          track()
          return value
        },
        set(newVal:T){
          console.log('set')
          value=newVal
          trigger()
          // return value
        }
      }
    })
  }
  
  let messageMyRef = MyRef<string>('tangshao')
  
  </script>
  
  
  
  
  <style scoped>
  </style>
  